﻿@{
    ViewBag.Title = "图片展示";
    Layout = "/Views/Shared/_Layout_Easyui.cshtml";
}
<style type="text/css">
    html, body { width: 100%; height: 100%; overflow: hidden; }
    .image_show_body { width: 100%; height: 100%; }
    .image_show_button { width: 24px; height: 100%; position: absolute; padding: 0 10px; z-index: 1; }
        .image_show_button + .left { left: 0; }
        .image_show_button + .right { right: 0; }
        .image_show_button > img { width: 24px; height: 24px; position: absolute; top: 50%; cursor: pointer; }
    .image_show_content { height: 100%; min-width: 12000px; position: absolute; }
    .image_show_grid { float: left; padding: 10px 44px; }
        .image_show_grid li { border: 1px solid #eee; margin: -1px 0 0 -1px !important; float: left; list-style: none; }
        .image_show_grid .focus { -webkit-box-shadow: 0px 0px 6px #333333; -ms-box-shadow: 0px 0px 6px #333333; box-shadow: 0px 0px 6px #333333; }
        .image_show_grid li { padding: 5px; }
            .image_show_grid li > img { width: 100%; height: 100%; }
</style>
<div class="image_show_body">
    <div class="image_show_button left">
        <img src="/Content/Image/left.png" alt="" />
    </div>
    <div class="image_show_button right">
        <img src="/Content/Image/right.png" alt="" />
    </div>
    <div class="image_show_content">
    </div>
</div>
@section Scripts
{
    <script type="text/javascript">
        (function () {
            Oneworks.CreatePage('ImageShow', function () { }, {
                loading: false,
                loaded: [],
                minWidth: 400,
                minHeight: 350,
                dataUrl: '/api/image/show',
                currentPage: 1,
                totlePage: 0,
                pageSize: 0,
                button: $('.image_show_button'),
                leftButton: $('.image_show_button').filter('.left').find('img'),
                rightButton: $('.image_show_button').filter('.right').find('img'),
                body: $('.image_show_body'),
                content: $('.image_show_content'),
                grid: function () {
                    return $('.image_show_grid');
                },
                li: function () {
                    return $('.image_show_grid li');
                },
                init: function () {

                    var that = this;
                    var gird = that.getGrid();
                    that.pageSize = gird.row * gird.col;
                    that.loadImage();
                    that.li().live({
                        mouseout: function () {
                            $(this).toggleClass('focus');
                        },
                        mouseover: function () {
                            $(this).toggleClass('focus');
                        },
                        click: that.imageClick
                    });
                    that.leftButton.click(function () {
                        if (that.currentPage == 1 || that.loading)
                            return;
                        else {
                            that.currentPage = that.currentPage - 1;
                            that.loadImage(function () {
                                that.showGrid();
                            });
                        }
                    });
                    that.rightButton.click(function () {
                        if (that.currentPage == that.totlePage || that.loading)
                            return;
                        else {
                            that.currentPage = that.currentPage + 1;
                            that.loadImage(function () {
                                that.showGrid();
                            });
                        }
                    });

                },
                getSize: function () {
                    var bw = this.body.css('width');
                    if (bw == '100%') {
                        bw = this.body.parent().width();
                    }
                    bw = parseInt(bw);

                    var btnw = parseInt(this.button.css('paddingLeft')) +
                           parseInt(this.button.css('paddingRight')) +
                           parseInt(this.button.css('width'));
                    var bh = this.body.css('height');

                    if (bh == '100%') {
                        bh = this.body.parent().height();
                    }
                    bh = parseInt(bh);

                    return {
                        width: bw - btnw * 2,
                        height: bh - 20
                    };
                },
                getGrid: function () {
                    var size = this.getSize();
                    return {
                        row: this.getApproximation(1, this.minWidth, size.width),
                        col: this.getApproximation(1, this.minHeight, size.height)
                    };
                },
                setGrid: function () {
                    var that = this;
                    var grid = that.getGrid();
                    var size = that.getSize();
                    var llp = parseInt(that.li().css('paddingLeft'));
                    var lrp = parseInt(that.li().css('paddingRight'));
                    var ltp = parseInt(that.li().css('paddingTop'));
                    var lbp = parseInt(that.li().css('paddingBottom'));
                    this.content.width(size.width * grid.row * 10);

                    this.grid().css({
                        width: size.width,
                        height: size.height
                    });
                    this.li().css({
                        width: (size.width - (llp + lrp) * grid.row) / grid.row - 1,
                        height: (size.height - (ltp + lbp) * grid.col) / grid.col - 1
                    });
                },
                showGrid: function () {
                    var that = this;
                    that.loading = true;
                    var left = (that.currentPage - 1) * that.body.width() * -1;
                    that.content.animate({
                        left: left
                    }, 1000, function () {
                        that.loading = false;
                    });
                },
                createGrid: function (datas) {
                    var html = '<ol class="image_show_grid">';
                    $.each(datas, function (i, n) {
                        html += '<li data=\'{"Width":' + n.Width + ',"Height":' + n.Height + ',"Url":"' + n.Url + '"}\'><img src="' + n.Url + '" alt="" /></li>';
                    });
                    html += '</ol>';
                    return html;
                },
                getApproximation: function (count, minimum, value) {
                    if (count < 0) return 1;
                    if (parseInt((value / count)) < minimum) {
                        if ((count - 1) < 0) return 1;
                        else return count - 1;
                    } else {
                        if (parseInt(value / (count + 1)) < minimum) return count;
                        else {
                            return this.getApproximation(count + 1, minimum, value);
                        }
                    }
                },
                requestData: function (p, r, fun) {
                    var params = 'page=' + p + '&row=' + r;
                    var that = this;
                    $.ajax({
                        type: "GET",
                        url: that.dataUrl,
                        data: params,
                        beforeSend: function () {
                            that.loading = true;
                        },
                        error: function () {
                            that.loading = false;
                            throw 'requestData run errors';
                        },
                        success: function (msg) {
                            that.loading = false;
                            if (msg) {
                                if (msg.result) {
                                    fun(msg.total, msg.data);
                                } else {
                                    throw 'requestData run errors,message:' + msg.message;
                                }
                            } else
                                throw 'requestData run errors';
                        }
                    });
                },
                isLoad: function (p) {
                    for (var i = 0; i < this.loaded.length; i++) {
                        if (this.loaded[i] == p) return true;
                    }
                    return false;
                },
                loadImage: function (fun) {
                    var that = this;
                    if (that.isLoad(that.currentPage) && (that.isLoad(that.currentPage + 1) || that.currentPage == that.totlePage)) {
                        if (typeof fun === 'function') fun();
                        return;
                    } else {
                        if (that.currentPage == 1) {
                            var loadcount = that.pageSize * 2;
                            that.requestData(1, loadcount, function (total, datas) {
                                that.loaded.push(1);
                                that.loaded.push(2);
                                var pagetotal = parseInt(total / that.pageSize) + ((total % that.pageSize) > 0 ? 1 : 0);
                                that.totlePage = pagetotal;
                                if (datas.length < that.pageSize) {
                                    that.content.append(that.createGrid(datas));
                                } else {
                                    var op = [], tp = [];
                                    for (var i = 0; i < datas.length; i++) {
                                        if (i < that.pageSize)
                                            op.push(datas[i]);
                                        else
                                            tp.push(datas[i]);
                                    }
                                    that.content.append(that.createGrid(op));
                                    that.content.append(that.createGrid(tp));
                                    that.setGrid();
                                }
                            });
                        } else {
                            if (that.totlePage < (that.currentPage + 1)) {
                                if (typeof fun === 'function') fun();
                            } else {
                                that.requestData(that.currentPage + 1, that.pageSize, function (total, datas) {
                                    that.loaded.push(that.currentPage + 1);
                                    that.content.append(that.createGrid(datas));
                                    that.setGrid();
                                    if (typeof fun === 'function') fun();
                                });
                            }
                        }
                    }
                },
                imageClick: function () {

                }

            });

            Oneworks.RunPage('ImageShow');
        }());
    </script>
}

